<template>
  <div>
    <div>
      <el-button
        size="mini" type="primary"
        @click="openDialog"
        style="margin-left: 10px">
        导入
      </el-button>
    </div>
  <el-dialog
    max-height="500px"
    :close-on-click-modal="false"
    :modal="false"
     title="数据导入"
     :visible.sync="visible">

    <el-steps align-center :active="step" finish-status="success">
      <el-step title="下载数据模板"></el-step>
      <el-step title="填写数据"></el-step>
      <el-step title="导入"></el-step>
    </el-steps>

    <div class="flex-center p-30">
      <div v-show="step===0">
        <el-link :href="downloadUrl" target="_blank">
          <el-button type="primary"><i class="el-icon-download"></i>下载数据模板</el-button>
        </el-link>
      </div>

      <div v-show="step===1">
        <div class="flex-center">
          <div>将您需要导入的数据填入模板文件，并上传至服务器</div>
          <el-upload
            :on-success="uploadSuccessHandler"
            :limit="1"
            class="upload-demo pv-30"
            drag
            name="multipartFile"
            :action="actionUrl">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          </el-upload>
          <div>只能上传excel/csv文件，且不超过10Mb</div>
        </div>
      </div>

      <div class="flex-center batch-table" v-show="step===2">

        <div>
          <el-table
            size="small"
            :data="batchData"
            :fit="true">

            <el-table-column
              type="index"
              width="50">
            </el-table-column>

            <el-table-column
              :prop="item.prop"
              :label="item.label"
              show-overflow-tooltip
              align="center"
              v-for="(item, index) in header"
              :key="index">

              <template scope="scope">
                <span>{{scope.row[item.prop]}}</span>
              </template>
            </el-table-column>



            <el-table-column width="160px" align="right" fixed="right">
              <template slot-scope="scope">

                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除
                </el-button>


              </template>
            </el-table-column>
          </el-table>
        </div>


        <el-button
          style="margin-top: 30px" type="primary"
          icon="el-icon-check"
          @click="saveBatch()">
          确认导入
        </el-button>
      </div>

      <div v-show="step===3">
        <div>您的操作已经完成</div>
        <div style="color: red; text-align: center">请刷新表格</div>

      </div>

      <el-button icon="el-icon-caret-right"
                 circle style="margin-top: 30px"
                 @click="nextStep()"></el-button>
    </div>


  </el-dialog>
  </div>
</template>

<script>
export default {
  name: "loader",
  props: {
    tableName: {
      type: String
    },
    apiName: {
      type: String
    }
  },
  computed: {
    actionUrl: function(){
      return `/api/port/previewImport/${this.tableName}`
    },
    header: function() {
      let filterAttr = ['updateTime', 'insertTime', 'id', 'createTime']
      if (!this.batchData[0]) {
        return []
      }

      return Object.keys(this.batchData[0])
        .filter(ele => {
          return filterAttr.indexOf(ele) === -1
        })
        .map(ele => {
        return {
          prop: ele,
          label: ele,
          type: 'String'
        }
      })

    }
  },
  methods: {
    nextStep() {
      if (this.step++ > 2) {
        this.visible = false;
      }
    },

    uploadSuccessHandler(res, file) {
      console.log(res, file)
      console.log(res.data.fileInfo)

      if (res['success']) {
        this.batchData = res.data['objectList']
        this.nextStep()
      }
    },

   openDialog() {
     this.$api.getTemplate(this.tableName).then(res => {
       this.downloadUrl = res.data.downloadUrl
     })
     this.step = 0
     this.visible=true
   },

    handleDelete(index) {
      this.batchData.splice(index, 1)
    },

    saveBatch() {
      this.$api.saveBatch(this.apiName, this.batchData).then(res => {
        console.log(res)
        if (res['success']) {
          this.nextStep()
          this.$message({
            message: "导入成功",
            type: "success",
            duration: 2000
          });
        }
      })
    }
// }
  },
  data() {
    return {
      step: 0,
      visible: false,
      downloadUrl: '',
      uploadFile: null,
      batchData: []
    }
  }
};
</script>

<style scoped>
.batch-table {
  min-height: 300px;
  width: 80%;
  overflow: scroll;
}
</style>